import React from 'react';

import { cssPrefix } from '../baseData';

import { Input, Checkbox } from '../form/Form.jsx';

class Thead extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      ...props
    }
  }

  componentWillReceiveProps(props){
    this.setState({
      ...this.state,
      ...props
    })
  }

  render() {
    let { hasCheckbox, hasOrder, columns} = this.state;

    return <thead>
    <tr>
      {
        hasCheckbox && <th width={'1%'}><Checkbox/></th>
      }
      {
        hasOrder && <th width={'5%'}>序号</th>
      }
      {
        columns.map((item, index) => {
          return <th
            className={item.className ? item.className : ''}
            key={index}
            style={item.align ? {textAlign: item.align} : {}}
            width={item.width}
          >{item.title}</th>
        })
      }
    </tr>
    </thead>
  }
}

class Tbody extends React.Component{

  constructor(props){
    super(props)
    this.state = {
      ...props
    }
  }

  componentWillReceiveProps(props){
    this.setState({
      ...this.state,
      ...props
    })
  }

  render(){
    let { hasCheckbox, hasOrder, dataSource, columns } = this.state;
    return <tbody>
    {
      dataSource && dataSource.length
        ? dataSource.map((item, index)=>{
        return <tr key={index}>
          {
            hasCheckbox && <td width={'1%'}><Checkbox/></td>
          }
          {
            hasOrder && <td>{index + 1}</td>
          }
          {
            columns.map((column, i)=>{
              return <Td key={`${index}-${i}`} column={column} item={item} />
            })
          }
        </tr>
      })
        : <tr>
          <td colSpan={columns.length + (hasOrder ? 1 : 0)}><div className={`${cssPrefix}table-no-data`}>暂无数据</div></td>
        </tr>
    }
    </tbody>
  }
}

class Td extends React.Component{
  constructor(props){
    super(props)

    this.state={
      ...this.valueInit(this.props),
      ...props
    }

    this.change = this.change.bind(this);
    this.blur = this.blur.bind(this);
  }

  componentWillReceiveProps(props){
    let settings = {
      ...this.state,
      ...props
    }
    this.setState({
      ...settings,
      ...this.valueInit(settings)
    })
  }

  valueInit(props){
    let { item, column } = props,
      { dataIndex, key, editable } = column,
      editValue =  editable ? (dataIndex ? this.getIndexData(item, dataIndex) : item[key]) : '',
      tdValue = dataIndex ? this.getIndexData(item, dataIndex) : item[key];

    return {
      editValue, tdValue
    }
  }

  getIndexData(item, dataIndex){
    let keyArr = dataIndex.split('.'),
      i = 1,
      data = item[keyArr[0]];

    while (keyArr[i]){
      data = data[keyArr[i]];
      i++;
    }
    return data
  }

  toEdit(e){
    let $td = $(e.currentTarget);
    this.setState({
      isEdit: true
    }, ()=>{
      $td.find('input')[0].focus()
    });
  }

  change(props, e){
    this.setState({
      editValue: props.value
    })
  }

  blur(props, e){
    let { onBlur } = this.state.column;
    typeof onBlur == 'function' && onBlur(this.state.editValue);
    this.setState({
      isEdit: false,
    })
  }

  render(){
    let { isEdit, tdValue, editValue, item, column } = this.state,
      { className, width, align, render, key, editable } = column;

    !className && (className = '');

    return <td
      className={className}
      width={width}
      style={align ? {textAlign: align} : {}}
      onClick={editable ? this.toEdit.bind(this) : ()=>{}}
    >
      {
        editable
          ? <div className={`${cssPrefix}table-editable`}>
            {
              isEdit
                ? <Input name={key} value={editValue} onChange={this.change} onBlur={this.blur} />
                : <span>{editValue}</span>
            }
          </div>
          : typeof render == 'function'
            ? render(item)
            : tdValue
      }
    </td>
  }
}

module.exports = {
  Thead,
  Tbody
}